<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div ref="el" class="fujianzhongruixinxuan">
    <Transition name="animate-zoomIn">
      <h1 v-show="show" class="line-center-title">
        福建中瑞心选
      </h1>
    </Transition>
    <div class="content">
      <Transition name="animate-fadeInDown">
        <p v-show="show" class="intro">
          福建中瑞心选科技有限责任公司致力于为各大政企事业单位提供综合福利服务，丰富的兑换场景，严选优质供应商，涵盖电影、蛋糕、粮油、影视会员等多品类优选商品及服务，满足个性化企业福利需求。
        </p>
      </Transition>
      <!-- <Transition name="animate-flipInX">
        <div v-show="show" class="flex flex-col">
          <span class="text-[24px] font-bold leading-[36px] mt-[80px] mb-[42px] text-center">深受众多行业客户信赖</span>
          <img class="logos" src="https://public-oss-file.zmaxfilm.com/website-compress/image-25.png" alt="">
        </div>
      </Transition> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fujianzhongruixinxuan {
  width: 1200px;
  margin: 0 auto;
  padding: 50px 0;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .content {
    display: flex;
    margin-top: 43px;
    flex-direction: column;

    .intro {
      color: #666666;
      font-size: 18px;
      font-weight: 500;
    }

    .logos {
      width: 100%;
      height: 457px;
    }
  }
}
</style>
